<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div>
    <!-- header start -->
    <!-- end  -->
    <div class="zxcf_detail_wper">
      <div class="zxcf_detail px1000">
        <div class="detail_intro clearfix">
          <div class="detail_intro_l fl">
            <div class="detail_introl_tit clearfix">
              <div class="det_introl_tit_l fl">
                <span>抵押</span> {{investName}}
              </div>
              <!-- end l -->
              <div class="det_introl_tit_r fr">
                保障级别：{{investStafGuard}}级 <img src="../assets/11112/images/det_wenhao.png" alt="">
              </div>
            </div>
            <!-- end tit -->
            <div class="det_intro_text mr20">
              <ul class="det_intro_tul clearfix">
                <li>
                  年华收益<br>
                  <span style="color:#ff7112;">
                  <strong>{{investGetYearMoney}}</strong>% 年华
                </span>
                </li>
                <li>
                  项目期限<br>
                  <span>
                  <strong>{{investDay}}</strong>个月
                </span>
                </li>
                <li>
                  项目规模<br>
                  <span>
                  <strong>{{investAmount}}</strong>万
                </span>
                </li>

              </ul>
              <!-- end  -->
              <ul class="det_intro_tul2 clearfix">
                <li>

                  发布日期：{{$moment(investReleaseTime).format('YYYY-MM-DD')}}
                </li>
                <li>
                  还款方式：{{investRepay}}
                </li>
                <li>
                  还款日期:{{$moment(investPayTime).format('YYYY-MM-DD')}}
                </li>
                <li>
                  保障机构：{{investStaf}}
                </li>
              </ul>
            </div>
            <!-- end text -->
          </div>
          <div class="detail_intro_r fr">
            <el-progress :text-inside="true" :stroke-width="24" v-if="investSubsribe"
                         :percentage="parseInt(investSubsribe)" status="success"></el-progress>
            <h2 class="det_intro_h2 clearfix"><span class="fl">投资进度:</span><em class="fr">{{investSubsribe}}%</em>
            </h2>

            <!--  -->
            <p class="det_rzye clearfix"><span class="fl">融资余额</span><em
              class="fr"><strong>{{invesBalance}}</strong>元</em>
            </p>
            <p class="det_input">
              <input type="number" v-model="bidAmount"
                     onblur="this.value=  this.value= 0 ? 0 : Math.floor(this.value/100) * 100"/>
            </p>
            <br/>
            <p>
              <el-tag>注意:{{investStartpay}}元起投</el-tag>
            </p>
            <p class="det_shouyi">每投资1万元收益<strong>{{investGetMoneyFromYear}}元</strong></p>
            <p><a href="#" class=" pro_btn det_btn" v-on:click.prevent="submitInvest">立即投资</a></p>
          </div>
        </div>
        <!-- end block1 -->
        <div class="detail_con mt30">
          <h2 class="detail_con_tit clearfix">
            <span v-on:click="qiehuan(1)" :class="{det_tit_curspan: ( title == 1 )}">项目描述</span>
            <span v-on:click="qiehuan(2)" :class="{det_tit_curspan: ( title == 2 )}">风控信息</span>
            <span v-on:click="qiehuan(3)" :class="{det_tit_curspan: ( title == 3 )}">贷后管理</span>
            <span v-on:click="qiehuan(4)" :class="{det_tit_curspan: ( title == 4 )}">投标记录<i>{{111}}</i></span>
          </h2>
          <div class="det_con_box">
            <div class="det_con_proone clearfix">
              <div class="det_l_box fl">

                <div class="det_proone_l" v-show="title==1">
                  <h2 class="det_proone_tit">{{investCompanyName}}</h2>
                  <div class="det_clsj ">
                    <p>成立时间：<strong>{{$moment(investCompanyTime).format('YYYY-MM-DD')}}</strong></p>
                    <p><span
                      style="margin-right:150px;">公司地址：<strong>{{investCompanyAddress}}</strong></span>所属行业：<strong>{{investCompanyType}}</strong>
                    </p>
                  </div>
                  <div class="det_clsj ">
                    <img src="../assets/11112/images/det_pic01.png" alt="">
                  </div>
                  <div class="det_clsj ">
                    <img src="../assets/11112/images/det_pic02.png" alt="">
                  </div>
                  <h2 class="det_proone_tit mt30">基本信息</h2>
                  <div class="det_clsj ">
                    <ul class="det_clsj_ul" v-for="(com,index) in companyPageInfo.list">
                      <li>{{com.companyName}}:<br>{{com.companyMoney}}:</li>
                    </ul>
                  </div>
                  <h2 class="det_proone_tit mt30">企业经营状况</h2>
                  <div class="det_clsj">
                    {{investCompanyManageStatus}}
                  </div>
                  <h2 class="det_proone_tit mt30">财务状况</h2>
                  <div class="det_clsj">
                    {{investCompanyMoneyStatus}}
                  </div>
                </div>
                <!-- end 项目描述 -->
                <div class="det_proone_l" v-show="title==2">
                  <h2 class="det_proone_tit">项目评估</h2>
                  <!--  -->
                  <div class="company-msg-option ppd-company-option2 show">
                    <div class="project-assess clearfix">
                      <ul>
                        <br>
                        <li>
                          <el-tag>基本信息</el-tag>
                          <el-progress v-if="investRiskBaseName" :percentage="parseInt(investRiskBaseName)"
                                       :color="customColors"></el-progress>
                          <div>{{investRiskBaseName}}分</div>
                        </li>
                        <li>
                          <el-tag type="success">财务实力</el-tag>
                          <el-progress v-if="investRiskCanName" :percentage="parseInt(investRiskCanName)"
                                       :color="customColors"></el-progress>
                          <div>{{investRiskCanName}}分</div>
                        </li>
                        <li>
                          <el-tag type="info">经营情况</el-tag>
                          <el-progress v-if="investRiskJingName" :percentage="parseInt(investRiskJingName)"
                                       :color="customColors"></el-progress>
                          <div>{{investRiskJingName}}分</div>
                        </li>
                        <li>
                          <el-tag type="warning">偿还能力</el-tag>
                          <el-progress v-if="investRiskChangName" :percentage="parseInt(investRiskChangName)"
                                       :color="customColors"></el-progress>
                          <div>{{investRiskChangName}}分</div>
                        </li>
                        <li>
                          <el-tag type="danger">实际控制人</el-tag>
                          <el-progress v-if="investRiskShiName" :percentage="parseInt(investRiskShiName)"
                                       :color="customColors"></el-progress>
                          <div>{{investRiskShiName}}分</div>
                        </li>
                      </ul>
                      <div class="project-assess-pt2" style=" color: #ff5a00;">
                        <p class="p1">{{investRiskPingName}}<span class="small-txt" style="font-size:12px;">分</span></p>
                        <p class="p2">综合信用评分</p>
                      </div>
                      <div class="project-assess-pt3">
                        <p class="p1">{{investRiskDengName}}</p>
                        <p class="p2">综合信用等级</p>
                      </div>
                    </div>
                  </div>
                  <!--  -->
                  <h2 class="det_proone_tit">项目保障</h2>
                  <!--  -->

                  <div class="prject-guarantee">
                    <dl class="dl1 clearfix">
                      <dt>担保方</dt>
                      <dd>
                        <em class="company-logo-sprite"
                            style="background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597469090602&di=b7814633870d43beb88131ef7a767781&imgtype=0&src=http%3A%2F%2Fpic.616pic.com%2Fys_bnew_img%2F00%2F06%2F38%2FxLMpAyq75Y.jpg);background-size: 100% 100%">
                        </em>
                        <span><a href="/vouch/detail/8" target="_blank" @click="changeModule('detail')">{{investRiskDanName}}</a></span>
                      </dd>
                    </dl>
                    <dl class="dl2 clearfix">
                      <dt style="height:200px;line-height:20px;">保障措施</dt>
                      <dd>
                        <p>1、担保机构提供不可撤销的连带责任担保，对本息100%保障；</p>
                        <p>2、担保机构按规定计提30%的担保费作为风险保障金，由理财范与担保公司共同监管；</p>
                        <p>3、借款企业提供足值抵押物；</p>
                        <p>4、借款企业实际控制人向债权人提供连带保证；</p>
                        <p>5、{{investStaf}}提供连带保证。</p>
                        <p><br></p></dd>
                    </dl>
                  </div>
                  <!--  -->
                  <h2 class="det_proone_tit">抵押物信息</h2>
                  <div class="det_dywxx_ul">{{investRiskDinName}}</div>
                  <!-- end 抵押物信息 -->
                  <h2 class="det_proone_tit">风险控制措施</h2>
                  <ul class="det_dywxx_ul">
                    <li>1、借款企业提供足值的抵押物；</li>
                    <li>2、借款企业法人提供个人连带保证；</li>
                    <li>3、{{investStaf}}提供连带保证；</li>
                    <li>4、担保公司及理财范平台将执行严格的贷后管理制度。</li>
                  </ul>
                  <!-- end 风险控制 -->
                  <h2 class="det_proone_tit">担保机构意见</h2>
                  <div class="det_dywxx_ul">{{investRiskJiGouName}}</div>
                  <!-- end 抵押物信息 -->
                </div>
                <!-- end fk -->
                <div class="det_proone_l" v-show="title==3">
                  <h2 class="det_proone_tit">放款通知</h2>
                  <p class="dhgl_p1"><img src="../assets/11112/images/1.jpg" alt="">{{investAfterNotice}}</p>
                  <h2 class="det_proone_tit">还款概况</h2>
                  <ul class="dhgl_ul">
                    <li>
                      <img src="../assets/11112/images/2.jpg" alt="">
                      <span>应付利息</span>
                      <span>{{investAfterRate}}</span>
                    </li>
                    <li>
                      <img src="../assets/11112/images/3.jpg" alt="">
                      <span>应付本金</span>
                      <span>{{investAfterCapital}}</span>
                    </li>
                    <li>
                      <img src="../assets/11112/images/4.jpg" alt="">
                      <span>利息余额</span>
                      <span>{{investAfterBrate}}</span>
                    </li>
                    <li>
                      <img src="../assets/11112/images/5.jpg" alt="">
                      <span>本金金额</span>
                      <span>{{investAfterBcaptical}}</span>
                    </li>

                  </ul>
                  <h2 class="det_proone_tit">还款明细</h2>
                  <div class="pl20 pr20 pt20">
                    <table class="dhgl_table">
                      <tr style="border-bottom:none;">
                        <th>还款日期</th>
                        <th>还款类型</th>
                        <th>还款金额</th>
                        <th>还款状态</th>
                      </tr>
                      <tr v-for="rem in reimbePageInfo.list">
                        <td>{{$moment(rem.reimbDate).format('YYYY-MM-DD')}}</td>
                        <td>{{rem.reimbType}}</td>
                        <td>{{rem.reimbMoney}}元</td>
                        <td>
                          <div v-if="rem.reimbStatus==0">未到期</div>
                          <div v-if="rem.reimbStatus==1">已到期</div>
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
                <!-- end dhgl -->
                <div class="det_proone_l" v-show="title==4">
                  <P class="det_tbjl_tit">
                  <span class="mr30"><img src="../assets/11112/images/det_tbjl_pic01.png" alt="">
                    目前总金额：￥{{investNowMoney}}</span>
                    <span><img src="../assets/11112/images/det_tbjl_pic02.png" alt="">
                    剩余金额：￥{{invesBalance}}</span>
                  </P>
                  <table class="det_table">
                    <tr class="det_table_head" style="height:40px;">
                      <td>投资用户</td>
                      <td>投资金额</td>
                      <td class="det_w1160">投资时间</td>
                      <td>状态</td>
                    </tr>
                    <tr v-for="inv in userTouPageInfo.list">
                      <td>{{inv.userId}}{{inv.investId}}</td>
                      <td>{{inv.userPaymoney}}元</td>
                      <td>{{$moment(inv.userPaytime).format('YYYY-MM-DD HH-mm-SS')}}</td>
                      <td>{{inv.userStatus}}</td>
                    </tr>

                  </table>
                </div>
                <!-- end tbjl -->
              </div>
              <!-- end l -->

              <div class="det_proone_r fl">
                <h3>项目资质审核</h3>
                <ul class="det_proone_rul">
                  <li class="clearfix">
                  <span class="fl mr15">
                    <img src="../assets/11112/images/det_dbh01.png" alt=""><br><br>
                    担保函

                  </span>
                    <span class="fl">
                    <img src="../assets/11112/images/det_dbh02.png" alt=""><br><br>
                    身份证

                  </span>
                  </li>
                  <li class="clearfix">
                  <span class="fl mr15">
                    <img src="../assets/11112/images/det_dbh01.png" alt=""><br><br>
                    担保函

                  </span>
                    <span class="fl">
                    <img src="../assets/11112/images/det_dbh02.png" alt=""><br><br>
                    身份证
                  </span>
                  </li>
                </ul>
              </div>
              <!-- end r -->
            </div>
            <!-- end 项目描述 -->

          </div>
        </div>
        <!-- end block2 -->
        <!-- 用户评论开始 -->
        <div class="det_comment mt30">
          <h2 class="det_comment_tit">用户评论</h2>
          <div class="det_comment_text clearfix">
            <div class="comment_l fl pl30">
              <img src="../assets/11112/images/comment_pic02.png" alt="">
            </div>
            <!-- end l -->
            <div class="comment_r fl ml20">
              <textarea name="" id="" cols="30" rows="10" v-model="comments"></textarea>
            </div>
            <!-- end r -->
          </div>
          <div class="comment_btn clearfix">
            <a href="javascript:void(0)" class="det_btn" v-on:click.prevent="submitComment">提交</a>
          </div>
          <div>
            <div class="comment_show" v-for="(com,index) in commentPageInfo.list">
              <ul class="comment_show_ul">
                <li class="clearfix">
              <span class="fl mr30">
                <img :src="require(`../assets/11112/images/${com.commentImage}`)" alt="">
                <!--{{com.commentImage}}-->
              </span>
                  <div class="fl ml">
                    <h3>{{com.commentName}}</h3>
                    <p>
                      <!--<img src="../assets/11112/images/comment_pic04.png" alt="">-->
                      {{com.commentContext}}
                    </p>
                    <p>
                      {{$moment(com.commentDate).format('YYYY-MM-DD')}}
                    </p>
                  </div>
                </li>
              </ul>
            </div>
            <el-button-group>
              <el-button type="primary" icon="el-icon-arrow-left" @click="perPage">上一页</el-button>
              <el-button type="primary" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i>
              </el-button>
            </el-button-group>
          </div>

        </div>
        <!-- 用户评结束 -->
      </div>
    </div>
    <!-- end con -->
  </div>
  <!--   footer end-->
</template>

<script>

  export default {

    name: 'detail',
    data() {
      return {
        title: 1,
        comments: '',
        bidAmount: '',
        id: localStorage.investId,
        invesBalance: 0,
        investAfterBcaptical: "",
        investAfterBrate: "",
        investAfterCapital: "",
        investAfterNotice: "",
        investAfterRate: "",
        investAmount: 0,
        investCompanyAddress: "",
        investCompanyManageStatus: "",
        investCompanyMoneyStatus: "",
        investCompanyName: "",
        investCompanyTime: "",
        investCompanyType: "",
        investDay: 0,
        investGetMoneyFromYear: "",
        investGetYearMoney: 0,
        investName: "",
        investNowMoney: 0,
        investPayTime: "",
        investReleaseTime: "",
        investRepay: "",
        investRiskBaseName: 0,
        investRiskCanName: "",
        investRiskChangName: "",
        investRiskDanName: "",
        investRiskDengName: "",
        investRiskDinName: "",
        investRiskJiGouName: "",
        investRiskJingName: "",
        investRiskPingName: 92,
        investRiskShiName: "",
        investStaf: "",
        investStafGuard: "",
        investStartpay: 0,
        investSubsribe: "",
        commentPageInfo: {},
        reimbePageInfo: {},
        companyPageInfo: {},
        userTouPageInfo:{},

        items: [
          {type: '', label: '标签一'},
          {type: 'success', label: '标签二'},
          {type: 'info', label: '标签三'},
          {type: 'danger', label: '标签四'},
          {type: 'warning', label: '标签五'}
        ],


        percentages: 0,
        customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ]

      }
    },
    created() {
      this.findAllInvest()
    },
    methods: {
      qiehuan(a) {
        this.title = a
      },
      submitComment() {
        this.axios.post('/api/details/addComment', {
          commentContext: this.comments,
          investId: this.id
        })
          .then((data) => {
            if (data.data === 1) {
              this.findAllInvest();
              alert('评论添加成功')
            } else {
              alert('添加失败')
            }
          })
      },
      submitInvest() {
        this.axios.post('/api/details/addInvest', {
          money: this.bidAmount,
          id: this.id
        })
          .then((data) => {
            if (data.data === 1) {
              this.findAllInvest();
              alert('投资成功')
            } else {
              alert('投资失败')
            }
          }).catch(()=>{
          alert("请先登录")
          this.changeModule("login");
        })
      },
      findAllInvest: function () {
        this.axios.get("/api/details/investDetail/" + this.id)
          .then((data) => {
            this.invesBalance = data.data.invesBalance,
              this.investAfterBcaptical = data.data.investAfterBcaptical,
              this.investAfterBrate = data.data.investAfterBrate,
              this.investAfterCapital = data.data.investAfterCapital,
              this.investAfterNotice = data.data.investAfterNotice,
              this.investAfterRate = data.data.investAfterRate,
              this.investAmount = data.data.investAmount,
              this.investCompanyAddress = data.data.investCompanyAddress,
              this.investCompanyManageStatus = data.data.investCompanyManageStatus,
              this.investCompanyMoneyStatus = data.data.investCompanyMoneyStatus,
              this.investCompanyName = data.data.investCompanyName,
              this.investCompanyTime = data.data.investCompanyTime,
              this.investCompanyType = data.data.investCompanyType,
              this.investDay = data.data.investDay,
              this.investGetMoneyFromYear = data.data.investGetMoneyFromYear,
              this.investGetYearMoney = data.data.investGetYearMoney,
              this.investName = data.data.investName,
              this.investNowMoney = data.data.investNowMoney,
              this.investPayTime = data.data.investPayTime,
              this.investReleaseTime = data.data.investReleaseTime,
              this.investRepay = data.data.investRepay,
              this.investRiskBaseName = data.data.investRiskBaseName,
              this.investRiskCanName = data.data.investRiskCanName,
              this.investRiskChangName = data.data.investRiskChangName,
              this.investRiskDanName = data.data.investRiskDanName,
              this.investRiskDengName = data.data.investRiskDengName,
              this.investRiskDinName = data.data.investRiskDinName,
              this.investRiskJiGouName = data.data.investRiskJiGouName,
              this.investRiskJingName = data.data.investRiskJingName,
              this.investRiskPingName = data.data.investRiskPingName,
              this.investRiskShiName = data.data.investRiskShiName,
              this.investStaf = data.data.investStaf,
              this.investStafGuard = data.data.investStafGuard,
              this.investStartpay = data.data.investStartpay,
              this.investSubsribe = data.data.investSubsribe
          }).catch(error=>{
          console.log("investDetail"+ error)
        });
        this.axios.get("/api/details/getComment/" + this.id)
          .then(data => {
            console.log(data);
            this.commentPageInfo = data.data
          }).catch(error=>{
            console.log("getComment"+ error)
        });
        this.axios.get("/api/details/getReimb/" + this.id)
          .then(data => {
            this.reimbePageInfo = data.data
          }).catch(error=>{
          console.log("getReimb"+ error)
        });
        this.axios.get("/api/details/getUserTou/"+this.id)
          .then(data=>{
            this.userTouPageInfo=data.data
          }).catch(error=>{
          console.log("getMinCompany"+ error)
        });
      },
      changeModule: function (t) {
        this.$emit("func", t)
      },
      // handleSizeChange(size) {
      //   this.commentPageInfo.pageSize=size
      // },
      // handleCurrentChange(currentPage) {
      //   this.commentPageInfo.pageNum=currentPage
      // },
      perPage() {
        this.commentPageInfo.pageNum = this.commentPageInfo.prePage
      },
      nextPage() {
        this.commentPageInfo.pageNum = this.commentPageInfo.nextPage
      },
      tender() {
        this.axios.get('/tender/addTender', {bidAmount: this.bidAmount})
          .then((data) => {
            if (data.data === 1) {
              this.findAllInvest();
              alert('评论添加成功')
            } else {
              alert('添加失败')
            }
          })
      },
      customColorMethod(percentage) {
        if (percentage < 30) {
          return '#909399';
        } else if (percentage < 70) {
          return '#e6a23c';
        } else {
          return '#67c23a';
        }
      },
    }
  }
</script>
<style scoped>
  @import '../assets/11112/css/style.css';

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }

</style>
